<template>
  <div class="wrapper">
    <el-dialog :visible="dialogVisible" :title="dialogType==='new'?'新建任务':'新角色'" :before-close="beforClose" :close-on-click-modal="false">
      <SearchForm
        v-if="isShow"
        ref="searchForm"
        :rules="rules"
        :inline="true"
        :label-width="'150px'"
        :search-form="searchForm"
        :search-data="searchData"
        :search-handle="searchHandle"
        no-border="border:none"
        class="detialSearch"
      />
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from '@/components/searchForm'

export default {
  name: 'Dialog',
  components: {
    SearchForm
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'new'
    }
  },
  data() {
    return {
      isShow: true,
      rules: {
        title: [
          {
            trigger: 'change',
            required: true
          }
        ],
        context: [
          {
            trigger: 'change',
            required: false
          }
        ]
      },
      searchData: {
        title: '',
        people: '选择1',
        type: '选择1',
        upload: '',
        projectName: '选择2',
        StartDate: '',
        endDate: '',
        context: ''
      },
      searchForm: [
        {
          type: 'Input',
          label: '标题:',
          prop: 'title',
          class: 'titleInp',
          clearable: true,
          clear: () => {},
          InputWidth: 'width:100%',
          input: (val) => {
          }
        },
        {
          type: 'Select',
          label: '负责人/协作者:',
          options: [
            {
              value: '选择1',
              label: '豆豆'
            },
            {
              value: '选择2',
              label: '靖靖'
            },
            {
              value: '选择3',
              label: '晓帆'
            }
          ],
          prop: 'people',
          clearable: true,
          InputWidth: 'width:100%',
          clear: () => {},
          change: (val) => {
          }
        },
        {
          type: 'Select',
          label: '类型:',
          options: [
            {
              value: '选择1',
              label: '任务'
            },
            {
              value: '选择2',
              label: '需求'
            },
            {
              value: '选择3',
              label: '缺陷'
            }
          ],
          prop: 'type',
          clearable: true,
          clear: () => {},
          change: (val) => {
          }
        },
        {
          type: 'Select',
          label: '关联项目:',
          options: [
            {
              value: '选择1',
              label: '不关联项目'
            },
            {
              value: '选择2',
              label: '天工华云'
            },
            {
              value: '选择3',
              label: '朝阳管委'
            }
          ],
          prop: 'projectName',
          clearable: true,
          clear: () => {},
          change: (val) => {
          }
        },
        {
          type: 'Date',
          label: '计划时间:',
          prop: 'StartDate',
          clearable: true,
          clear: () => {},
          change: (val) => {
          }
        },
        {
          type: 'Date',
          label: ' -- ',
          prop: 'endDate',
          clearable: true,
          clear: () => {},
          // readonly: true,
          change: (val) => {
          }
        },
        {
          type: 'ueditor',
          label: '描述:',
          prop: 'context',
          isClear: false,
          isEdit: '',
          InputWidth: 'width:100%',
          class: 'ueditorCont',
          changeUeditor: (val) => {
          }
        },
        {
          type: 'file',
          label: '附件:',
          prop: 'upload',
          listType: 'picture-card',
          class: 'fileStyle',
          text: '点击选择文件',
          disabled: false,
          clearable: true,
          action: '',
          handlePreview: () => {},
          handleRemove: () => {},
          handleAvatarSuccess: () => {},
          handleAvatarProgress: () => {},
          beforeAvatarUpload: () => {},
          handleChange: () => {},
          InputWidth: 'width:100%'
        }
      ],
      searchHandle: [
        {
          type: 'primary',
          label: '新建',
          handle: (item) => {
            console.log('+++', this.searchData)
          },
          clickoutside: () => {
          }
        },
        {
          type: 'primary',
          label: '新建并继续',
          handle: () => {
            this.searchData = {}
            console.log('---', this.searchData)
          },
          clickoutside: () => {}
        },
        {
          type: 'primary',
          label: '关闭',
          handle: () => {
            this.$emit('close')
          }
        }
      ]
    }
  },
  computed: {},
  watch: {},
  mounted() {
  },
  methods: {
    beforClose(val) {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.el-form-item__content {
    width: 85% !important;
  }
</style>
<style lang="scss">
.wrapper{
  .titleInp{
    .el-form-item__content{
      width: 76%;
      .text{
        width: 100%;
      }
    }
  }

  .fileStyle{
    .el-form-item__content{
      width: 79%;
      height: 150px;
      background: #eee;
    }
    .upload-demo{
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;
      padding-left: 60px;
    }
  }
  .ueditorCont{
    .el-form-item__content{
      width: 79%;
      .editor{
        width: 100%;
      }
    }
  }
}
</style>
